<template>
    <div class="card-box">
        <el-row>
            <el-col :md="12" :offset="6">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="公告标题：" prop="name">
                        <el-input v-model="ruleForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="公告内容：" class="edit">
                        <quill-editor ref="myTextEditor" v-model="ruleForm.content" :options="editorOption">
                        </quill-editor>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {
        quillEditor
    } from 'vue-quill-editor';
    export default {
        data() {
            return {
                ruleForm: {
                    name: '',
                    content: ''
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入公告标题',
                        trigger: 'blur'
                    }]
                },
                editorOption: {
                    placeholder: '请输入...',
                }
            }
        },
        components: {
            quillEditor
        }
    }
</script>

<style lang="scss">
    .ql-container {
     min-height: 400px;
    }

    .edit {
        & > .el-form-item__content {
            line-height: 22px !important; 
        }
    }
</style>